<!DOCTYPE html>
<html>
<head>
    <title>the5fire-backbone-view</title>
</head>
<body>
    <ul id="brand-wrapper">
    </ul>

    <script type="text/template" id="search_template">
        <ul>
        <% _.each(labels, function(name) { %>
            <% if(name != "label2") {%>
            <li><%= name %></li>
            <% } %>
        <% }); %>
        </ul>
    </script>
<script src="http://the5fireblog.b0.upaiyun.com/staticfile/jquery-1.10.2.js"></script>
<script src="http://the5fireblog.b0.upaiyun.com/staticfile/underscore-min.1.8.2.js"></script>
<script src="http://the5fireblog.b0.upaiyun.com/staticfile/backbone.js"></script>
<script>
(function ($) {
    MemberModel = Backbone.Model.extend({});

    MemberCollection = Backbone.Collection.extend({
        model:MemberModel
    });

    var Band = new MemberCollection([
        {name:'John'},
        {name:'Paul'},
        {name:'George'},
        {name:'Ringo'},
    ]);

    var MemberView = Backbone.View.extend({
        tagName:'li',

        render:function() {
            this.$el.text(this.model.get('name'));
            this.parentView.$el.append(this.$el);
            return this;
        }
    });

    var MembersView = Backbone.View.extend({
        el:'#brand-wrapper',

        initialize:function() {
            this.render();
        },

        render:function() {
            this.$el.empty();

            var thisView = this;

            this.collection.each(function(bandMember) {
                var bandMemberView = new MemberView({
                    model:bandMember
                });
                bandMemberView.parentView = thisView;

                bandMemberView.render();
            });
            return this;
        }
    });

    var brandView = new MembersView({
        collection:Band
    });
})(jQuery);
</script>
</body>
</html>